<script lang="ts" setup>
  import { inject, getCurrentInstance, onMounted, onUpdated } from "vue";

  const props = defineProps<{ title?: string }>();
  const instance = getCurrentInstance();
  const activedKey = inject("activedKey");
  const tabs = inject<any>("tabs");

  onUpdated(() => {
    if (instance) {
      const finded = tabs.value.find((item: any) => item.key === instance.vnode.key);
      if (finded) {
        finded.title = props.title;
        finded.key = instance.vnode.key;
      }
    }
  });

  onMounted(() => {
    if (instance) {
      const finded = tabs.value.find((item: any) => item.key === instance.vnode.key);
      if (!finded) {
        tabs.value.push({
          title: props.title,
          key: instance.vnode.key,
        });
      }
    }
  });
</script>

<template>
  <div class="umi-tab-panel" v-if="instance?.vnode.key === activedKey">
    <slot></slot>
  </div>
</template>
